<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速创建地球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<script type="text/javascript" src="../examples/assets/plugins/include-lib.js" include="jquery,bootstrap,admin-lte,haoutil,jquery.scrollTo,ace,lazyload"
		 libpath="../examples/assets/plugins/"></script>
		<link rel="stylesheet" href="../build/Widgets/widgets.css" type="text/css" />
		<link rel="stylesheet" href="../examples/assets/plugins/bootstrap/bootstrap-checkbox/awesome-bootstrap-checkbox.css"
		 type="text/css" />
		<link rel="stylesheet" href="../examples/assets/css/CEarth-Example.css" type="text/css" />

	</head>
	<body>
		<div id="cesiumContainer" class="fullWindow"></div>


		<!-- 面板 -->
		<div class="infoview">
			<div class="radio radio-info radio-inline">
				<input type="radio" id="radioTerrain1" name="radioTerrain" value="none" />
				<label for="radioTerrain1">无地形 </label>
			</div>
			<div class="radio radio-info radio-inline">
				<input type="radio" id="radioTerrain2" name="radioTerrain" value="xyz" checked />
				<label for="radioTerrain2">标准服务</label>
			</div>
			<div class="radio radio-info radio-inline" title="目前演示的是mars3d部署的地形服务">
				<input type="radio" id="radioTerrain3" name="radioTerrain" value="ion" />
				<label for="radioTerrain3">Ion在线服务</label>
			</div>
			<div class="radio radio-info radio-inline">
				<input type="radio" id="radioTerrain4" name="radioTerrain" value="arcgis" />
				<label for="radioTerrain4">ArcGIS服务</label>
			</div>
			<!-- <div class="radio radio-info radio-inline">
      <input type="radio" id="radioTerrain5" name="radioTerrain" value="gee" >
      <label for="radioTerrain5">谷歌地球企业服务</label>
    </div>

    <div class="radio radio-info radio-inline">
      <input type="radio" id="radioTerrain6" name="radioTerrain" value="vr" >
      <label for="radioTerrain6">VR服务</label>
    </div> -->

			<div>
				调试：
				<div class="checkbox checkbox-primary checkbox-inline">
					<input id="chkWireframe" class="styled" type="checkbox" />
					<label for="chkWireframe"> 地形三角网 </label>
				</div>
			</div>
		</div>

		<script src="../build/Cesium.js"></script>
		<script src="../build/CEarth.js"></script>
		<script>
			//创建三维地球场景 
			var viewer = new CEarth.App('cesiumContainer', {
				scene: {
					center: {
						x: 102.833722,
						y: 24.881539,
						z: 50000,
						heading: 0,
						pitch: -90
					},
					showSun: true,
					showMoon: true,
					showSkyBox: true,
					showSkyAtmosphere: false,
					fog: true,
					fxaa: true,
					globe: {
						show: true,
						showGroundAtmosphere: false,
						depthTestAgainstTerrain: false,
						baseColor: '#546a53',
					},
					cameraController: {
						zoomFactor: 3.0,
						minimumZoomDistance: 1,
						maximumZoomDistance: 50000000,
						enableRotate: true,
						enableZoom: true,
					},
				},
				control: {
					baseLayerPicker: true, //basemaps底图切换按钮
					homeButton: true, //视角复位按钮
					sceneModePicker: true, //二三维切换按钮
					navigationHelpButton: true, //帮助按钮
					fullscreenButton: true, //全屏按钮
					timeline: false, //时间轴
					animation: false, //动画部件
				},
				terrain: {
					type: 'xyz',
					url: 'http://data.marsgis.cn/terrain',
				},
				basemaps: {}
			});


			viewer.scene.globe.terrainExaggeration = 10

			//三角网
			$('#chkWireframe').change(function() {
				var val = $(this).is(':checked')
				viewer.scene.globe._surface.tileProvider._debug.wireframe = val
			})

			//按按钮切换
			$('input:radio[name="radioTerrain"]').change(function() {
				var type = $(this).val()
				switch (type) {
					default:
					case 'none': //无地形
						viewer.createTerrain({
							type: 'none',
						});
						break
					case 'xyz': //标准xyz服务
						viewer.createTerrain({
							type: 'xyz',
							url: 'http://data.marsgis.cn/terrain',
						})
						break
					case 'arcgis': //ArcGIS地形服务
						viewer.createTerrain({
							type: 'arcgis',
							url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
						})
						break
					case 'ion': //cesium官方ion在线服务
						haoutil.msg('ION服务在国外，加载略慢，请耐心等候。')
						viewer.createTerrain({
							type: 'ion',
							requestWaterMask: true,
							requestVertexNormals: true,
						})
						break
					case 'gee': //谷歌地球企业服务
						viewer.createTerrain({
							type: 'gee',
							url: 'http://www.earthenterprise.org/3d',
							proxy: 'http://data.marsgis.cn/proxy/',
						})
						break
					case 'vr': //vr地形服务
						viewer.createTerrain({
							type: 'vr',
							url: 'https://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/',
						})
						break
				}
			})
		</script>
	</body>
</html>
